<template>
  <div class="sidebar" ref="sidebar">
    <div class="logo-details">
      <i class="iconfont icon-keji"></i>
      <span class="logo_name">Smart-Parking</span>
    </div>
    <ul class="nav-links">
      <li>
        <div
          :class="this.$route.path === '/index' ? 'link-active' : 'link_name'"
        >
          <router-link to="/index">
            <i class="iconfont icon-zhuye"></i>
            <span class="link_name">首页</span>
          </router-link>
          <ul class="sub-menu blank">
            <li><a class="link_name" href="#">首页</a></li>
          </ul>
        </div>
      </li>
      <li>
        <div
          :class="
            this.$route.path.slice(0, 6) === '/space'
              ? 'link-active'
              : 'link_name'
          "
        >
          <router-link to="/space">
            <i class="iconfont icon-tingchewei"></i>
            <span class="link_name">停车位管理</span>
          </router-link>
          <ul class="sub-menu blank">
            <li><a class="link_name" href="#">停车位管理</a></li>
          </ul>
        </div>
      </li>
      <li>
        <div
          :class="
            this.$route.path.slice(0, 8) === '/private'
              ? 'link-active'
              : 'link_name'
          "
        >
          <router-link to="/private">
            <i class="iconfont icon-sirendingzhi"></i>
            <span class="link_name">私有停车管理</span>
          </router-link>
          <ul class="sub-menu blank">
            <li><a class="link_name" href="#">私有停车管理</a></li>
          </ul>
        </div>
      </li>
      <li>
        <div
          :class="
            this.$route.path.slice(0, 7) === '/region'
              ? 'link-active'
              : 'link_name'
          "
        >
          <router-link to="/region">
            <i class="iconfont icon-quyuguanli"></i>
            <span class="link_name">区域管理</span>
          </router-link>
          <ul class="sub-menu blank">
            <li><a class="link_name" href="#">区域管理</a></li>
          </ul>
        </div>
      </li>
      <li>
        <div
          :class="
            this.$route.path.slice(0, 7) === '/charge'
              ? 'link-active'
              : 'link_name'
          "
        >
          <router-link to="/charge">
            <i class="iconfont icon-menzhenshoufei"></i>
            <span class="link_name">计费管理</span>
          </router-link>
          <ul class="sub-menu blank">
            <li><a class="link_name" href="#">计费管理</a></li>
          </ul>
        </div>
      </li>

      <li>
        <div
          :class="
            this.$route.path.slice(0, 9) === '/charging'
              ? 'link-active'
              : 'link_name'
          "
        >
          <router-link to="/charging">
            <i class="iconfont icon-chongdianzhuang"></i>
            <span class="link_name">充电管理</span>
          </router-link>
          <ul class="sub-menu blank">
            <li><a class="link_name" href="#">充电管理</a></li>
          </ul>
        </div>
      </li>
      <li>
        <div
          :class="this.$route.path === '/opinion' ? 'link-active' : 'link_name'"
        >
          <router-link to="/opinion">
            <i class="iconfont icon-yijianfankui"></i>
            <span class="link_name">意见管理</span>
          </router-link>
          <ul class="sub-menu blank">
            <li><a class="link_name" href="#">意见管理</a></li>
          </ul>
        </div>
      </li>
      <li>
        <div
          :class="
            this.$route.path === '/bigData_min' ? 'link-active' : 'link_name'
          "
        >
          <router-link to="/bigData_min">
            <i class="iconfont icon-shuju"></i>
            <span class="link_name">数据大屏</span>
          </router-link>
          <ul class="sub-menu blank">
            <li><a class="link_name" href="#">数据大屏</a></li>
          </ul>
        </div>
      </li>
      <li>
        <div
          class="iocn-link"
          :class="
            this.$route.path.slice(0, 12) === '/distinguish' ||
            this.$route.path.slice(0, 7) === '/record' ||
            this.$route.path.slice(0, 8) === '/payment' ||
            this.$route.path.slice(0, 8) === '/visitor'
              ? 'link-active'
              : 'link_name'
          "
        >
          <router-link to="/distinguish">
            <i class="iconfont icon-quyuguanli"></i>
            <span class="link_name">记录管理</span>
          </router-link>
          <i class="iconfont icon-xuanzeqizhankai arrow"></i>
        </div>
        <ul class="sub-menu">
          <li><a class="link_name" href="#">记录管理</a></li>
          <li>
            <router-link to="/distinguish" class="smallMenu">
              识别记录
            </router-link>
          </li>
          <li>
            <router-link to="/record" class="smallMenu"> 停车记录 </router-link>
          </li>
          <li>
            <router-link to="/payment" class="smallMenu">
              支付记录
            </router-link>
          </li>
          <li>
            <router-link to="/visitor" class="smallMenu">
              访客记录
            </router-link>
          </li>
        </ul>
      </li>
      <li>
        <div
          class="iocn-link"
          :class="
            this.$route.path.slice(0, 5) === '/user' ||
            this.$route.path.slice(0, 8) === '/company'
              ? 'link-active'
              : 'link_name'
          "
        >
          <router-link to="/company">
            <i class="iconfont icon-wode"></i>
            <span class="link_name">用户管理</span>
          </router-link>
          <i class="iconfont icon-xuanzeqizhankai arrow"></i>
        </div>
        <ul class="sub-menu">
          <li><a class="link_name" href="#">用户管理</a></li>
          <li>
            <router-link to="/company" class="smallMenu"
              >合作单位管理</router-link
            >
          </li>
          <li v-if="role === 'admin'">
            <router-link to="/user" class="smallMenu">系统用户管理</router-link>
          </li>
        </ul>
      </li>

      <li>
        <div class="profile-details">
          <div class="profile-content">
            <img :src="profile" alt="profile" />
          </div>
          <div class="name-job">
            <div class="profile_name">{{ nickname }}</div>
            <div class="job">{{ role }}</div>
          </div>
          <i class="iconfont icon-tuichu"></i>
        </div>
      </li>
    </ul>
    <div class="toggle" @click="sideBar_status" ref="toggle">
      <span class="toggle-icon" ref="toggleIcon">
        <i class="iconfont icon-xuanzeqizhankai"></i>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: "Sidebar",
  data() {
    return {
      profile:
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.crazyming.com%2Fwp-content%2Fuploads%2F2018%2F04%2Ftimg-2.jpg&refer=http%3A%2F%2Fwww.crazyming.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638521355&t=66e922ac14528e09da85730a26f616e6",
      nickname: "",
      role: "",
    };
  },
  created() {
    const nickname = this.$store.state.nickname;
    const admin = this.$store.state.admin;
    this.nickname = nickname;
    admin === true ? (this.role = "admin") : (this.role = "general");
  },
  mounted() {
    let arrow = document.querySelectorAll(".arrow");
    for (let i = 0; i < arrow.length; i++) {
      arrow[i].addEventListener("click", (e) => {
        let arrowParent = e.target.parentElement.parentElement;
        arrowParent.classList.toggle("showMenu");
      });
    }
  },
  computed: {
    sidebarStatus() {
      return this.$store.state.sidebar;
    },
  },
  methods: {
    sideBar_status() {
      const sidebarStatus = this.sidebarStatus;
      const sidebar = this.$refs.sidebar;
      const toggleIcon = this.$refs.toggleIcon;
      const toggle = this.$refs.toggle;
      sidebar.classList.toggle("close");
      toggleIcon.classList.toggle("close");
      toggle.classList.toggle("close");
      sidebarStatus
        ? this.$store.commit("sidebarStatus_change", false)
        : this.$store.commit("sidebarStatus_change", true);
    },
    openMenu(e) {
      const showMenu = e.target.parentElement.parentElement;
      showMenu.classList.toggle("showMenu");
    },
  },
};
</script>

<style scoped>
@import url("../assets/css/SidebarStyle.css");
</style>